<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../css/bootstrap.css">
    <!-- 输入组用到的下拉菜单要依赖 jquery 和booststrap.js-->
    <script src="../js/jquery-3.7.1.min.js"></script>
    <script src="../js/bootstrap.bundle.js"></script>
    <title>Document</title>
</head>
<body>
    <div class="container">
        <!-- .input-group用于创建一个输入组 -->
        <div class="input-group mt-2">
            <!-- .input-group-prepend用于在输入框前面创建一个块 -->
            <div class="input-group-prepend">
                <!-- .input-group-text控制块内文字的样式 -->
                <span class="input-group-text">
                    用户名
                </span>
            </div>
            <input type="text" class="form-control" placeholder="用户名">
        </div>
        <div class="input-group mt-2">
            <input type="text" class="form-control" placeholder="用户id">
            <!-- .input-group-append在输入框后放置一个块，注意：这个块的位置实际上使跟标签的顺序有关 -->
            <div class="input-group-append">
                <span class="input-group-text">@niit.com</span>
            </div>
        </div>
        <div class="input-group mt-2">
            <div class="input-group-prepend">
                <span class="input-group-text">$</span>
            </div>
            <input type="text" class="form-control" placeholder="US Dollar">
            <div class="input-group-append">
                <span class="input-group-text">.00</span>
            </div>
        </div>
        <!-- 使用输入组结合单选框和复选框 -->
        <div class="row mt-2">
            <div class="col-sm-6">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <!-- 在span内也可以放单选框或者复选框 -->
                        <span class="input-group-text"><input type="checkbox"></span>
                    </div>
                    <input type="text" class="form-control">
                </div>
            </div>
            <div class="col-sm-6">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <span class="input-group-text"><input type="radio"></span>
                    </div>
                    <input type="text" class="form-control">
                </div>
            </div>
        </div>
        <!-- 合并多个输入框 -->
        <div class="input-group mt-2">
            <div class="input-group-prepend">
                <span class="input-group-text">你的信息</span>
            </div>
            <input type="text" class="form-control" placeholder="名字">
            <input type="text" class="form-control" placeholder="地址">
        </div>
        <!-- 输入框结合多个按钮 -->
        <div class="row mt-2">
            <div class="col-sm-5">
                <div class="input-group">
                    <div class="input-group-prepend">
                        <button type="submit" class="btn btn-primary">提交</button>
                        <button type="reset" class="btn btn-danger">重置</button>
                    </div>
                    <input type="text" class="form-control" placeholder="一些信息...">
                </div>
            </div>
            <div class="col-sm-7">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="一些信息...">
                    <div class="input-group-append">
                        <button type="submit" class="btn btn-primary">提交</button>
                        <button type="reset" class="btn btn-danger">重置</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 按钮结合下拉菜单 -->
        <div class="input-group mt-2">
            <input type="text" class="form-control">
            <div class="input-group-append">
                <!-- 下拉按钮后续章节再展开介绍 -->
                <button type="button" class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">游戏</button>
                <div class="dropdown-menu">
                    <a href="#" class="dropdown-item">LOL</a>
                    <a href="#" class="dropdown-item">PUBG</a>
                </div>
            </div>
        </div>
        <!-- 按钮和下拉分段 -->
        <div class="input-group mt-2">
            <input type="text" class="form-control">
            <div class="input-group-append">
                <button type="button" class="btn btn-outline-secondary">游戏</button>
                <!-- .dropdown-toggle-split实现分段下拉菜单 -->
                <button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split"
                 data-toggle="dropdown"><span class="sr-only">下拉菜单</span></button>
                <div class="dropdown-menu">
                    <a href="#" class="dropdown-item">LOL</a>
                    <a href="#" class="dropdown-item">PUBG</a>
                </div>
            </div>
        </div>
        <!-- 控制是入组的大小 -->
        <!-- .input-group-lg设置一个大型输入组 -->
        <div class="input-group input-group-lg mt-2">
            <div class="input-group-prepend">
                <span class="input-group-text">
                    用户名
                </span>
            </div>
            <input type="text" class="form-control" placeholder="用户名">
        </div>
        <div class="input-group mt-2">
            <div class="input-group-prepend">
                <span class="input-group-text">
                    用户名
                </span>
            </div>
            <input type="text" class="form-control" placeholder="用户名">
        </div>
                <!-- .input-group-sm设置一个小型输入组 -->
        <div class="input-group input-group-sm mt-2">
            <div class="input-group-prepend">
                <span class="input-group-text">
                    用户名
                </span>
            </div>
            <input type="text" class="form-control" placeholder="用户名">
        </div>
    </div>
    
</body>
</html>